import router from "@/router/permission";
import routerStore from "@/stores/routerStore";
import { ElCollapse, ElCollapseItem } from "element-plus";
import { defineComponent, reactive } from "vue";
import ThirdMenuIndex from "./ThirdMenuIndex";
import classes from './index.module.scss'

export default defineComponent({
  setup(_,context) {
   
    const renderMenuItem = () => {
      // 获取当前的路由 code
      const targetSecondRoute = router.currentRoute.value.name
      const store = routerStore()

      // 与 store 中的 route 树匹配
      const route = store.appRoute.children.find(el => el.code === targetSecondRoute)
      let activeName = route?.children?.map(el => el.code)


      return (
        <div class="demo-collapse">
          <ElCollapse v-model={activeName} class={classes.elCollapse}>
            {activeName &&
              route?.children?.map(sRoute =>
                <ElCollapseItem title={sRoute.title} name={sRoute.code} key={sRoute.code}>{
                  sRoute?.children?.map((r)=> <ThirdMenuIndex key={r.code} route={r}></ThirdMenuIndex>) 
                }
                </ElCollapseItem>
              )
            }
          </ElCollapse>
        </div>
      );
    }
    console.log(context.slots.default);
    
    return () => context.slots.default ? context.slots.default() : renderMenuItem()
  }
})